<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="images/拉黑小怪兽.png">
    <title>关注</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="keywords" content="" />

    <script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
    <link href="css/daohang.css" rel='stylesheet' type='text/css' />
    <link href="css/button.css" rel='stylesheet' type='text/css' />
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
    <link href="css/style.css" rel='stylesheet' type='text/css' />
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800"
        rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Mallanna" rel="stylesheet">
    <style>
        .sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 9999999;
            min-width: 1000px;
        }

        /* 添加一个CSS类来实现水平翻转 */
        .flip-horizontal {
            transform: scaleY(-1);
            filter: FlipH;
            /* 兼容IE */
            transition: transform 0.5s ease;
        }

        .yes {
            display: block;
        }

        .cd-search {
            width: 60%;
            top: 100%;
            left: 38%;
            border-radius: 25px;
        }

        .cd-search input {
            border-radius: 25px;
        }

        .daxiao {
            width: auto;
            height: auto;
            max-width: 720px;
            max-height: 460px;
        }

        #div1 {
            height: 600px;
            width: 800px;
            position: relative;
            left: 300px;
            margin-top: 80px;
            background-color: white;
        }

        #div2 {
            height: 80px;
            width: 800px;
            position: relative;
        }

        #img1 {
            width: 60px;
            height: 60px;
            position: relative;
            right: 350px;
            top: 10px;
        }

        #p1 {
            position: relative;
            right: 280px;
            bottom: 35px;
        }

        #p2 {
            position: relative;
            right: 280px;
            bottom: 35px;
        }

        #img2 {
            position: relative;
            top: 60px;
        }

        #img0 {
            width: 40px;
            height: 40px;
            position: relative;
            right: 100px;
            top: 10px;
        }

        #p01 {
            position: relative;
            right: 100px;
            top: 68px;
        }

        #p02 {
            position: relative;
            top: 40px;
        }

        #p03 {
            position: relative;
            left: 100px;
            top: 10px;
        }

        #p04 {
            position: relative;
            right: 100px;
            bottom: 70px;
            font-size: 30px;
        }

        #p05 {
            position: relative;
            bottom: 130px;
            font-size: 30px;
        }

        #p06 {
            position: relative;
            left: 100px;
            bottom: 190px;
            font-size: 30px;
        }
    </style>
</head>

<body style="overflow:visible">
    <div class="top-bar_sub_w3layouts_agile sticky" style="height: 80px;height: 80px; border-bottom: 2px solid grey;">
        <ul class="_ul_ daohangpos">
            <li class=" _need_popover" style=" position: absolute; left: 200px; top: 25px;">
                <a class="daohang_font" id="daohang-faxian" href="shouye.html">首页 </a>
                <a href="remen.html" class="daohang_font">热门</a>
                <a href="xinzuo.html" class="daohang_font">新作</a>
                <a href="guanzhu.html" class="daohang_font">关注</a>
                <a href="cangku.html" class="daohang_font">仓库</a>
            </li>
        </ul>
        <div class="search">
            <div class="right" style="right: 90px;">
                <h1><a style="position: absolute;left: 30px;top:20px;color:black;" href="shouye.html">Photo
                        Go</a></h1>
                <h5>
                    <a style="width: 150px; position: absolute;right:380px;top:25px;padding: 2px 20px;text-align: center;"
                        class="sign signup " href="userinfo.html">修改个人信息</a>
                    <a style="position: absolute;right:250px;top:25px;padding: 2px 20px;text-align: center;"
                        class="sign signup " href="shangchuan.html">上传</a>
                    <a id="tuichu"
                        style="width: 150px; position: absolute;right:80px;top:25px;padding: 2px 20px;text-align: center;"
                        class="sign signup ">退出登录</a>
                </h5>
            </div>
            <div class="cd-main-header">
                <ul class="cd-header-buttons">
                    <li><a class="cd-search-trigger" href="#cd-search"
                            style="position: absolute;right: 10px;top: 35px;">
                            <span></span></a></li>
                </ul>
            </div>
            <div id="cd-search" class="cd-search">

                <input id="sousuo" name="Search" type="search" placeholder="搜索作品" onkeydown="handleKeyDown(event)">

            </div>
        </div>
        <div class="clearfix"> </div>
    </div>
    <div id="total" style="background-color: #F7F8FA;width: 1500px;position: absolute;">
        <div id="div0" style="width: 270px;background-color: white;position: sticky;left:1200px;top:150px;">
            <div style="width: 270px;height: 140px;background-color: white;border: 2px solid rgb(238, 239, 242);">
                <img id="img0" src="./images/拉黑小怪兽.png">
                <p id="p01">作品</p>
                <p id="p02">粉丝</p>
                <p id="p03">关注</p>
                <p id="p04">0</p>
                <p id="p05">0</p>
                <p id="p06">0</p>
            </div>
        </div>
        <div id="imagetotal" style="position: relative;bottom:100px;">
            <!--             <div id="div1">
                <div id="div2">
                    <img id="img1" src="./images/拉黑小怪兽.png">
                    <p id="p1">昵称 </p>
                    <p id="p2">粉丝 </p>
                </div>
                <a href="test.html?id=1008"><img src="./images/1.jpeg" class="daxiao" id="img2"></a>
            </div> -->
        </div>
    </div>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        const token = localStorage.getItem("token");
        const userid = localStorage.getItem("userid");
        var tuichu = document.getElementById('tuichu');
        function handleKeyDown(event) {
            if (event.keyCode === 13) {
                var sousuo = document.getElementById('sousuo');
                var d1 = {
                    "description": "",
                }
                d1["description"] = sousuo.value;
                console.log("type", typeof (sousuo.value), "text:", sousuo.value);
                $.ajax({
                    method: 'get',
                    url: 'http://localhost:7777/content/Category/list' + "?description=" + sousuo.value,
                    contentType: 'application/json;charset=UTF-8',
                    success: function (data, status, xhr) {
                        var responseText = xhr.responseText;
                        console.log(responseText);
                        if (responseText.includes("200")) {
                            var result = JSON.parse(responseText);
                            var data = result["data"];
                            console.log("data:", data);
                            var len = data.length;
                            var where = "sousuo.html" + "?";
                            for (var i = 0; i < len; i++)
                                where = where + "id=" + data[i]["id"];
                            console.log(where);
                            window.location.href = where;
                        }
                    },
                    error: function (xhr, status, error) {
                        var responseText = xhr.responseText;
                        console.log("error:", responseText);
                    }
                })
                event.preventDefault(); // 阻止默认的回车提交行为（如果有）
            }
        }
        tuichu.addEventListener("mousedown", function (event) {
            $.ajax({
                method: 'get',
                url: 'http://localhost:7777/logout',
                contentType: 'application/json;charset=UTF-8',
                headers: {
                    "token": token
                },
                success: function (data, status, xhr) {
                    var responseText = xhr.responseText;
                    console.log(responseText);
                    if (responseText.includes("200")) {
                        tuichu.href = "shouyeno.html";
                        tuichu.click();
                    }
                },
                error: function (xhr, status, error) {
                    var responseText = xhr.responseText;
                    console.log("error:", responseText);
                }
            })
        })
        $.ajax({
            method: 'get',
            url: 'http://localhost:7777/fans/liked/' + userid,
            contentType: 'application/json;charset=UTF-8',
            success: function (data, status, xhr) {
                var responseText = xhr.responseText;
                console.log(responseText);
                if (responseText.includes("200")) {
                    var now = 0;
                    for (var i = 0; i < responseText.length; i++) {
                        if (responseText[i] == "{")
                            now++;
                    }
                    var p05 = document.getElementById('p05');
                    p05.innerHTML = now-1;
                }
            },
            error: function (xhr, status, error) {
                var responseText = xhr.responseText;
                console.log("error:", responseText);
            }
        })
        $.ajax({
            method: 'get',
            url: 'http://localhost:7777/article/user/' + userid,
            contentType: 'application/json;charset=UTF-8',
            success: function (data, status, xhr) {
                var responseText = xhr.responseText;
                console.log(responseText);
                if (responseText.includes("200")) {
                    var result = JSON.parse(responseText);
                    var data = result["data"];
                    console.log("data:", data);
                    var len = data.length;
                    var p04 = document.getElementById('p04');
                    p04.innerHTML = len;
                }
            }
        });
        $.ajax({
            method: 'get',
            url: 'http://localhost:7777/fans/likeDetial/' + userid,
            contentType: 'application/json;charset=UTF-8',
            success: function (data, status, xhr) {
                var responseText = xhr.responseText;
                console.log(responseText);
                if (responseText.includes("200")) {
                    var now = 0;
                    var result = JSON.parse(responseText);
                    var data = result["data"];
                    console.log("data:", data);
                    var len = data.length;
                    var p06 = document.getElementById('p06');
                    p06.innerHTML = len;
                    const imagetotal = document.getElementById('imagetotal');
                    for (var i = 0; i < len; i++) {
                        const div1 = document.createElement('div');
                        div1.id = "div1";
                        const div2 = document.createElement('div');
                        div2.id = "div2";
                        const img1 = document.createElement('img');
                        img1.id = "img1";
                        img1.src = data[i]["avatar"];
                        const p1 = document.createElement('p');
                        p1.id = "p1";
                        p1.innerHTML = data[i]["nicheng"];
                        div2.appendChild(img1);
                        div2.appendChild(p1);
                        const p2 = document.createElement('p');
                        p2.id = "p2";
                        p2.innerHTML = "粉丝数：" + data[i]["fansnum"];
                        div2.appendChild(p2);
                        div1.appendChild(div2);
                        const a = document.createElement('a');
                        a.href = "xiangqing.html?" + data[i]["id"];
                        const img2 = document.createElement('img');
                        img2.id = "img2";
                        img2.src = data[i]["articleDetailVo"]["photo"];
                        img2.classList.add("daxiao");
                        a.appendChild(img2);
                        div1.appendChild(a);
                        imagetotal.appendChild(div1);
                    }
                }
            },
            error: function (xhr, status, error) {
                var responseText = xhr.responseText;
                console.log("error:", responseText);
            }
        })
    </script>
</body>

</html>